<template>
  <div class="page-content">
    <el-card>
      <TableBar :columns="columns" :layout="layout">
        <div slot="top">
          <el-form label-width="120px" :model="searchMap">
            <el-row :gutter="20">
              <el-col :xs="19" :sm="12" :lg="7">
                <el-form-item label="投入品名称：">
                  <el-select
                    v-model="searchMap.supplyName"
                    placeholder="请选择投入品"
                  >
                    <el-option
                      v-for="item in ShopSupplyInfo"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="19" :sm="12" :lg="7">
                <el-form-item label="sku编号：">
                  <el-input v-model="searchMap.skuNumber"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="19" :sm="12" :lg="7">
                <el-form-item label="基地：">
                  <el-select
                    size="small"
                    v-model="searchMap.baseId"
                    placeholder="请选择基地"
                    @change="selectEvent"
                  >
                    <el-option
                      v-for="item in baseInfoList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="19" :sm="12" :lg="7">
                <el-form-item label="供应商：">
                  <el-select
                    v-model="searchMap.supplierName"
                    placeholder="请选择供应商"
                  >
                    <el-option
                      v-for="item in supplierlist"
                      :key="item.id"
                      :label="item.supplierName"
                      :value="item.supplierName"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="19" :sm="12" :lg="7">
                <el-form-item label="开始时间：">
                  <el-date-picker
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    v-model="searchMap.startTime"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :xs="19" :sm="12" :lg="7">
                <el-form-item label="结束时间：">
                  <el-date-picker
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    v-model="searchMap.endTime"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-row style="margin-bottom: 5px">
            <el-col :span="3" :offset="21"
              ><el-button
                size="small"
                type="primary"
                @click="fuzzyQuery"
                v-auth="'breed_input_inventory_select'"
                >搜索</el-button
              >
              <el-button
                size="small"
                @click="resetSerch"
                v-auth="'breed_input_inventory_select'"
                >重置</el-button
              ></el-col
            >
          </el-row>
        </div>
        <el-row slot="bottom" :gutter="20" type="flex">
          <el-col :span="7"
            ><el-button
              type="primary"
              size="small"
              @click="downLoadExcel"
              v-auth="'breed_input_inventory_select'"
              >导出</el-button
            ></el-col
          >
          <el-col :span="7">
            <el-tooltip effect="dark" content="批量删除库存信息">
              <el-button
                type="danger"
                size="small"
                @click="removeBatch"
                v-auth="'breed_input_inventory_delete'"
                class="el-icon-delete-solid"
              ></el-button
            ></el-tooltip>
          </el-col>
          <el-col>
            <el-select
              size="small"
              v-model="value"
              placeholder="请选择基地"
              v-auth="'breed_input_inventory_select'"
              @change="selectEvent"
            >
              <el-option
                v-for="item in baseInfoList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </TableBar>
      <Table
        ref="tableRef"
        :page.sync="page"
        :columns="columns"
        :showPage="showPage"
        :data="tableData"
        @changeSize="changeSize"
        @changePage="changePage"
        @selectData="selectData"
      >
        <div
          v-for="(item, index) in columns"
          :key="index"
          class="item"
          effect="dark"
          placement="top-start"
        >
          <el-table-column
            type="selection"
            v-if="index === 1"
            effect="dark"
            align="left"
            placement="top-start"
            class="item"
          >
          </el-table-column>
          <el-table-column
            :label="item.name"
            v-if="item.show"
            :prop="item.prop"
            width="155"
            show-overflow-tooltip
          ></el-table-column>
        </div>
        <el-table-column label="操作" width="125" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="mini"
              class="el-icon-delete"
              v-auth="'breed_input_inventory_delete'"
              @click="removeOne(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </Table>
    </el-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Table from "../../components/common/TheTable";
import {
  getInputinVentory,
  deleteInventoryInfo,
  deleteInventoryInfoBath,
  getBaseSupplyData,
  vagueSearchSupply,
} from "../../Api/productionmanage/index";
export default {
  name: "InputInventory",
  components: {
    Table,
  },
  data() {
    return {
      tableData: [],
      page: {
        size: 5,
        current: 1,
      },
      showPage: true,
      layout: "search, refresh, column",
      selectList: [],
      columns: [
        { name: "饲料名称", show: true, prop: "supplyName" },
        { name: "基地名称", show: true, prop: "baseName" },
        { name: "供应商", show: false, prop: "supplierName" },
        { name: "SKU编号", show: true, prop: "skuNumber" },
        { name: "剩余数量", show: true, prop: "surplusAmount" },
        { name: "投入品规格", show: true, prop: "specification" },
        { name: "投入品类型", show: true, prop: "type" },
        { name: "存储仓库", show: true, prop: "warehouseName" },
        { name: "仓库管理员", show: true, prop: "managerName" },
      ],
      value: "",
      isSearchMap: false,
      searchMap: {
        skuNumber: null,
        supplyName: null,
        supplierName: null,
        baseId: null,
        startTime: null,
        endTime: null,
      },
    };
  },
  computed: {
    ...mapState({
      baseInfoList: (state) => state.productionInfo.baseInfoList,
      ShopSupplyInfo: (state) => state.productionInfo.ShopSupplyInfo,
      supplierlist: (state) => state.productionInfo.suppliersList, //获取商家信息
    }),
  },
  created() {
    this.getTableData();
  },
  methods: {
    async getTableData() {
      console.log("企业所有基地信息", this.baseInfoList);
      const { data: res } = await getInputinVentory(
        this.page.size,
        this.page.current
      );
      console.log(res);
      if (res.statusCode === 20000) {
        this.tableData = res.data.records;
        this.page.total = res.data.total;
      }
    },
    changePage(page) {
      this.page.current = page.current;
      if (this.isSearchMap) {
        this.fuzzyQuery();
      }
      if (this.value) {
        this.selectEvent(this.value);
        return;
      }
      this.getTableData();
    },
    // 分页 改变每页显示的条数
    changeSize(size) {
      this.page.size = size.pageSize;
      if (this.isSearchMap) {
        this.fuzzyQuery();
      }
      if (this.value) {
        this.selectEvent(this.value);
        return;
      }
      this.getTableData();
    },
    selectData(list) {
      this.selectList.push(
        list.map((list) => {
          return list.id;
        })
      );
    },
    async removeOne(id) {
      console.log(id);
      const confirmResuly = await this.$confirm(
        "此操作将永久删除所选出库信息, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      if (confirmResuly !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await deleteInventoryInfo(id);
      if (res.statusCode === 20000) {
        this.$message.success("删除成功");
        this.getTableData();
      }
    },

    downLoadExcel() {
      let name = "投入品库存信息";
      window.location.href = `http://120.77.156.205:9603/breed/supply/management/excel/download?fileName=${name}`;
    },
    async removeBatch() {
      const confirmResuly = await this.$confirm(
        "此操作将永久删除所选入库信息, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      if (confirmResuly !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await deleteInventoryInfoBath(this.selectList);
      if (res.statusCode === 20000) {
        this.$message.success("删除成功");
        this.getTableData();
      }
    },
    async fuzzyQuery() {
      console.log(this.searchMap);
      let obj = {};
      // 将用户想要模糊查询的属性写入对象
      for (let key in this.searchMap) {
        if (this.searchMap[key]) {
          obj[key] = this.searchMap[key];
        }
      }
      const { data: res } = await vagueSearchSupply(
        obj,
        this.pageSize,
        this.page.current
      );
      console.log(res);
      this.isSearchMap = true;
      this.tableData = res.data.records;
      this.page.total = res.data.total;
    },
    async selectEvent(id) {
      const { data: res } = await getBaseSupplyData(
        id,
        this.page.size,
        this.page.current
      );
      this.tableData = res.data.records;
      this.page.total = res.data.total;
    },
    resetSerch() {
      this.isSearchMap = false;
      for (let key in this.searchMap) {
        this.searchMap[key] = '';
      }
      this.getTableData();
    },
  },
};
</script>